<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('库存盘点')"/>
    <style>
        .deer-cell {
            border-color: #d3dce6;
            height: 46px;
            border-style: solid;
            z-index: 200000;
            text-align: center;
        }
        .deer-cell .deer-cell-title {
            line-height: 44px;
            font-weight: bold;
            color: #99a9bf;
            width: auto;
        }
        .searchBox{
            width: 50px;
            height: 32px;
            text-align: center;
            line-height: 32px;
            background-color: #409EFF;
            color: #FFFFFF;
            border-radius: 4px;
            display: inline-block;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div class="container-div">
    <el-form label-position="left" :model="insert" :rules="rules" ref="insertForm" class="demo-ruleForm" label-width="80px" label-position="right">
        <el-divider content-position="left" style="margin-bottom: 20px">盘点信息</el-divider>
        <div style="margin-left: 5%">
            <div>
                <el-form-item label="物料编码:" prop="itemCode">
                    <el-input style="width: 192px" @focus="getItem" placeholder="请点击选择物料" readonly size="small" v-model="insert.itemCode"></el-input>
                </el-form-item>
            </div>
            <div>
                <el-form-item size="small" label="仓库:" prop="wareId">
                    <el-select v-model="insert.wareId" placeholder="请选择仓库">
                        <el-option label="原料库" value="原料库"></el-option>
                    </el-select>
                </el-form-item>
            </div>
            <div>
                <el-form-item size="small" label="批次:" prop="batch">
                    <el-select v-model="insert.batch" placeholder="请选择批次">
                        <el-option v-for="(item, index) in suppliers" :key="index" :label="item.supplierName" :value="item.supplierId">{{item.supplierName}}</el-option>
                    </el-select>
                </el-form-item>
            </div>
        </div>
    </el-form>
    <el-dialog title="物料列表" width="60%" :visible.sync="dialogTableVisible">
        <el-row>
            <el-col :span="24">
                <el-form style="margin-left: 10px" :inline="true" :model="item.param" class="demo-form-inline">
                    <el-form-item size="mini" label="关键字">
                        <el-input size="mini" v-model="item.param.itemCode" placeholder="关键字"></el-input>
                    </el-form-item>
                    <el-form-item size="mini">
                        <el-button size="mini" type="primary" @click="getItems()">查询</el-button>
                    </el-form-item>
                </el-form>
                <el-table @row-click="setItem" border size="small" ref="multipleTable" height="315" :data="item.list">
                    <el-table-column property="itemId" label="ID" v-if="false"></el-table-column>
                    <el-table-column property="itemCode" label="物料编码"></el-table-column>
                    <el-table-column property="itemName" label="物料描述"></el-table-column>
                    <el-table-column width="80" property="sort" label="物料类型">
                        <template slot-scope="scope">
                                <span v-if="scope.row.sort ==1">
                                    钢材
                                </span>
                            <span v-if="scope.row.sort ==2">
                                    铜材
                                </span>
                        </template>
                    </el-table-column>
                    <el-table-column width="80" property="unit" label="单位"></el-table-column>
                </el-table>
                <el-pagination
                        @current-change="chengCurrentPage"
                        :current-page="item.currentPage"
                        :page-size="item.pageSize"
                        layout="prev, pager, next"
                        :total="item.total">
                </el-pagination>
            </el-col>
        </el-row>
    </el-dialog>
</div>
<div th:include="include::footer"></div>
<script th:src="@{/wms/js/date.js}"></script>
<script type="text/javascript" charset="UTF-8">
    var prefix = ctx + "in/billInMaster"
    function submitHandler() {
        app.save();
    }
    var app = new Vue({
        el: '.container-div',
        data() {
            return {
                rules:{
                    wareId: [
                        { required: true, message: '请选择仓库', trigger: 'change' },
                    ],
                    itemCode: [
                        { required: true, message: '请选择物料', trigger: 'change' },
                    ],
                    batch: [
                        { required: true, message: '请选择批次', trigger: 'change' },
                    ]
                },
                dialogTableVisible: false,
                item: {
                    currentPage: 1,
                    pageSize: 6,
                    total: '',
                    param: {
                        itemCode: ''
                    },
                    list: []
                },
                insert: {
                    batch: '',
                    wareId: '',
                    itemCode: '',
                    itemName: '',
                    itemId: '',
                    unit: '',
                    sort: ''
                },
                suppliers: []
            }
        },
        methods: {
            setItem(row, column, event) {
                this.dialogTableVisible = false;
                this.insert.itemId = row.itemId;
                this.insert.itemName = row.itemName;
                this.insert.itemCode = row.itemCode;
                this.insert.unit = row.unit;
                this.insert.sort = row.sort;
            },
            //物料列表分页
            chengCurrentPage: function(currentPage){
                this.item.currentPage = currentPage;
                this.getItems();
            },
            getItem(i) {
                this.dialogTableVisible = true;
                this.getItems();
            },
            //关闭此页面
            closeModal: function(){
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            },
            //取消选择
            toggleSelection(){
                this.$refs.multipleTable.clearSelection();
                this.dialogTableVisible = false;
                this.selectItems = [];
            },
            //选择
            handleSelectionChange(items){
                this.selectItems = items;
            },
            //保存提交
            save: function(){
                var that = this;
                this.$refs['insertForm'].validate((valid) => {
                    if (valid) {
                        // var data = {
                        //     billInMaster: {
                        //         supplierId: that.insert.supplierId,
                        //         type: that.insert.type,
                        //         supplierName: that.insert.supplierName
                        //     },
                        //     billInDetailList: that.insert.itemList
                        // }
                        // console.log(data)
                        // $.ajax({
                        //     cache: true,
                        //     url: prefix + '/insert',
                        //     type: 'POST',
                        //     async: false,
                        //     dataType: "json",
                        //     contentType: "application/json;charset-UTF-8",
                        //     data: JSON.stringify(data),
                        //     error: function (request) {
                        //         $.modal.alertError("系统错误");
                        //     },
                        //     success: function (data) {
                        //         if(data.code == 200){
                        //             $.modal.msgReload(data.msg, "success")
                        //         }else{
                        //             $.modal.alertError(data.msg);
                        //         }
                        //     }
                        // })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            //获取物料列表
            getItems: function(){
                var that = this;
                var item = that.item;
                $.ajax({
                    cache: true,
                    type: "POST",
                    url: "/system/itemInfo/findList",
                    data: {
                        itemCode: item.param.itemCode,
                        pageSize: item.pageSize,
                        pageNum: item.currentPage
                    },
                    async: false,
                    error: function(request){
                        $.modal.alertError("系统错误");
                    },
                    success: function(data){
                        var msg = data.rows;
                        for(var i = 0; i < msg.length; i++){
                            if(msg[i].pd != null){
                                msg[i].pd = msg[i].pd.slice(0, 10);
                            }
                        }
                        that.item.list = msg;
                        that.item.total = data.total;
                    }
                });
            },
        },
        created(){}
    })
</script>
</body>
</html>
